<template>
	<el-container :direction="vertical">
		<el-header height="56px">
			<span class="title">| 题库列表</span>
			<span>
				<el-button type="default" size="mini" class="but">
          <i class="el-icon-refresh"></i> 刷新
          </el-button>
			</span>
			<span class="help">
				<i class="el-icon-question"></i>帮助
			</span>
		</el-header>

		<el-container direction="vertical" class="list-content">
			<el-main id="search">
				<div>
					<el-select v-model="form" class="time">
						<el-option label="创建时间" value="createdAt"></el-option>
						<el-option label="更新时间" value="createdAt"></el-option>
					</el-select>
					<span> - </span>
					<el-date-picker
            v-model="form"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>

					<span> - </span>

					<el-date-picker
            v-model="form"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>

					<el-button type="primary" size="mini" class="qingchu">清除</el-button>
          <el-button type="primary" size="mini" class="huishouzhan">回收站文件</el-button>
				</div>

				<div>
					<el-select
            class="kemu"
            v-model="search.subjecttypes"
            value-key=""
            placeholder="科目"
            clearable
            filterable
          >
						<el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.subjectname"
              :value="item.subjecttypes"
            ></el-option>
					</el-select>

					<el-select
            class="tixing"
            v-model="search.typesnum"
            value-key=""
            placeholder="题型"
            clearable
            filterable
          >
						<el-option
              v-for="item in questionTypes"
              :key="item.value"
              :label="item.testquestionsname"
              :value="item.typesnum"
            ></el-option>
					</el-select>

          <el-select
            class="tixing"
            v-model="search.stagetypes"
            value-key
            placeholder="难易程度"
            clearable
            filterable
          >
						<el-option
              v-for="item in difficultDegrees"
              :key="item.value"
              :label="item.stagename"
              :value="item.stagetypes"
            ></el-option>
					</el-select>

					<el-button type="primary" size="default" class="chaxun">查询</el-button>
				</div>
        <div class="content">
          <input type="checkbox" class="che"><span class="che-span">全选</span>
          <el-button class="del"> <span>删除</span> </el-button>
          <el-button class="jiaru"> <span>加入试卷</span> </el-button>
        </div>

				<!-- <el-button type="primary" @click="onSubmit">立即创建</el-button>
				<el-button>取消</el-button> -->

        <el-container class="content-body">
          <!-- 表格 -->
          <question-table></question-table>
        </el-container>

        
			</el-main>

		</el-container>

	</el-container>
</template>

<script>
// 引入组件
import QuestionTable from '../../components/question/table.vue';
export default {
  components: {
    QuestionTable,
  },
	data() {
		return {
      vertical: "vertical",
			form: {},
			rules: {},
      subjects: [],  // 科目
      questionTypes: [],  // 题型
      difficultDegrees: [], // 难易度
      search: [],  // 查询参数 通过科目类型 题型 难易度查询
		};
  },
  created () {
    // 获取试题列表
    this.$axios
      .get("/system/sqSubjecttable/selSubject")
      .then((res) => {
        if(res.data.code === 1) {
          this.subjects = res.data.data;
        }
      });

    // 获取题型
    this.$axios
      .get("/system/sqTestquestionstypes/selTestquestions")
      .then((res) => {
        if(res.data.code === 1) {
          this.questionTypes = res.data.data;
        }
      });

    // 获取难易度
    this.$axios
      .get("/system/sqStagetypes/selstagetypes")
      .then((res) => {
        if(res.data.code === 1) {
          this.difficultDegrees = res.data.data;
        }
      });
  },
  methods :{
    onSubmit() {

    },
  }
};
</script>

<style>
.el-main {
  border: 22px solid #edeef2;
}
.title{
  margin-left: 16px;
  color: #2883f8;
  line-height: 56px;
}
.but {
  margin-left: 1380px;
}
.help{
  margin-left: 20px;
  color: #023785;
}
.time {
  margin-left: 50px;
}
.qingchu {
  margin-left: 22px;
  border: none;
  background-color: #f9463f;
}

.huishouzhan {
  width: 288px;
  height: 40px;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  color: #000;
  position: absolute;
  top: 163px;
  left: 1520px;
}
.kemu {
  margin-top: 22px;
  margin-left: 50px;
}
.tixing {
  margin-left: 24px;
}
.chaxun {
  margin-left: 28px;
  background-color: #033886;
  border: 1px solid #033886;
}
.content {
  margin-top: 45px;
  margin-left: 76px;
}
.che {
  width: 16px;
  height: 16px;
  border: 1px solid #dddddd;
}
.che-span {
  margin-left: 10px;
}
.del {
  background-color: #033886;
  color: white;
  width: 75px;
  height: 35px;
  border: 1px solid #d9d9d9;
  margin-left: 95px;
}
.jiaru {
  background-color: #033886;
  color: white;
  width: 124px;
  height: 35px;
  border: 1px solid #d9d9d9;
  margin-left: 10px;
}
.el-pagination {
  width: 750px;
  margin-top: 50px;
  margin-left: 630px;
}
</style>
